<template>
  <div >
    <el-col :span="24">
      <Tabs value="name1" id="div">
        <TabPane label="基本信息" name="name1">
          <!--一行-->
          <el-row class="row" id="one">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>基本信息</h3>
                  </el-col>
                  <el-col :span="2">
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>名称</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="糖尿病患者用药调研">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>状态</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="已结束">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>最后修改日期</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="2016-09-23">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>调研有效日期</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="2016-09-01~2016-09-30">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>审批人员</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="仇伟佳">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>已填问卷量</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="0">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>设计样本量</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="1500">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>依据标签</span>
                    </el-col>
                    <el-col :span="15">
                      <router-link to="/company/LabelsXx">
                        <input type="text" class="search-input" value="糖尿病2017Q4">
                      </router-link>
                    </el-col>
                  </el-col>
                </el-col>
<!--                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>设计样本量</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="1500">
                    </el-col>
                  </el-col>
                </el-col>-->

              </el-row>
            </div>
          </el-row>

          <!--一行-->
          <el-row class="row" id="one">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>调查问卷</h3>
                  </el-col>
                  <el-col :span="2">
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding: 20px 0">
                  <div style="width: 100%;padding: 0 30px;">
                    <div style="padding-top: 10px;padding-bottom: 30px">
                      <table class="table" style="width: 100%">
                        <thead style="text-align: left;font-size: 15px">
                        <tr>
                          <th style="width: 40%">问题</th>
                          <th style="width: 10%">类型</th>
                          <th>相关标签</th>
                        </tr>
                        </thead>
                        <tbody class="tbdy">
                        <tr class="tr">
                          <td @click="tds5()">1.以下哪些药物具有协同作用?</td>
                          <td>单选</td>
                          <td class="td">
                            <span class="green">德谷胰岛素</span>
                            <span class="dark_green">低血糖</span>
                            <span class="yellow">有效性</span>
                          </td>
                        </tr>
                        <tr v-show="trs">
                          <td colspan="3">
                            <div>
                              <p style="padding: 20px 0">
                                <span style="display: inline-block;width: 30%">A.青霉素类与头孢菌素类</span>
                                <span style="display: inline-block;width: 30%">B.头孢菌素类与氨基糖苷类</span>
                                <span style="display: inline-block;width: 30%">C. Beta内酰胺类与氨基糖苷类</span>
                              </p>
                            </div>
                          </td>
                        </tr>
                        <tr class="tr">
                          <td @click="tds6()">2.开颅术后，需要给予丙戊酸钠和美罗培南分别预防癫痫和感染，您如何处理?</td>
                          <td>单选</td>
                          <td class="td">
                            <span class="green">德谷胰岛素</span>
                            <span class="dark_green">低血糖</span>
                            <span class="yellow">有效性</span>
                          </td>
                        </tr>
                        <tr v-show="trs2">
                          <td colspan="3">
                            <div>
                              <p style="padding: 20px 0">
                                <span style="display: inline-block;width: 30%">A. 不主张联用，严格按照说明书要求</span>
                                <span style="display: inline-block;width: 30%">B. 可以联用，对丙戊酸钠血药浓度进行监测</span>
                                <span style="display: inline-block;width: 30%">C. 权衡利弊，再做考虑</span>
                              </p>
                            </div>
                          </td>
                        </tr>
                        <tr class="tr">
                          <td @click="tds7()">3.治疗单纯性下尿路感染需要使用较小剂量的原因是?</td>
                          <td>单选</td>
                          <td class="td">
                            <span class="green">德谷胰岛素</span>
                            <span class="dark_green">低血糖</span>
                            <span class="yellow">有效性</span>
                          </td>
                        </tr>
                        <tr v-show="trs3">
                          <td colspan="3">
                            <div>
                              <p style="padding: 20px 0">
                                <span style="display: inline-block;width: 30%">A.多数药物尿药浓度远高于血药浓度</span>
                                <span style="display: inline-block;width: 30%">B.多数药物尿药浓度远低于血药浓度</span>
                              </p>
                            </div>
                          </td>
                        </tr>
                        <tr class="tr">
                          <td @click="tds8()">4.在临床药物使用过程中，您是否会关注抗生素相互作用并考虑调整剂量?</td>
                          <td>单选</td>
                          <td class="td">
                            <span class="green">德谷胰岛素</span>
                            <span class="dark_green">低血糖</span>
                            <span class="yellow">有效性</span>
                          </td>
                        </tr>
                        <tr v-show="trs4">
                          <td colspan="3">
                            <div>
                              <p style="padding: 20px 0">
                                <span style="display: inline-block;width: 25%">A. 不会，临床工作较忙，无暇顾及</span>
                                <span style="display: inline-block;width: 25%">B. 小部分会，尤其是对某些相互作用明确的药物会关注</span>
                                <span style="display: inline-block;width: 25%">C.大部分会，患者本身肝肾功能不全会更为关注</span>
                                <span style="display: inline-block;width: 25%">D. 都会考虑，药物相互作用在临床意义重大</span>
                              </p>
                            </div>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
<!--                  <el-col :span="6">
                    <h4 class="pdg" style="height: 50px">1.以下哪些药物具有协同作用?</h4>
                    <p class="pdg">A.青霉素类与头孢菌素类</p>
                    <p class="pdg">B.头孢菌素类与氨基糖苷类</p>
                    <p class="pdg">C. Beta内酰胺类与氨基糖苷类 </p>
                  </el-col>
                  <el-col :span="6">
                    <h4 class="pdg" style="height: 50px">2.开颅术后，需要给予丙戊酸钠和美罗培南分别预防癫痫和感染，您如何处理?</h4>
                    <p class="pdg">A. 不主张联用，严格按照说明书要求</p>
                    <p class="pdg">B. 可以联用，对丙戊酸钠血药浓度进行监测</p>
                    <p class="pdg">C. 权衡利弊，再做考虑</p>
                  </el-col>
                  <el-col :span="6">
                    <h4 class="pdg" style="height: 50px">3.治疗单纯性下尿路感染需要使用较小剂量的原因是?</h4>
                    <p class="pdg">A.多数药物尿药浓度远高于血药浓度</p>
                    <p class="pdg">B.多数药物尿药浓度远低于血药浓度</p>
                  </el-col>
                  <el-col :span="6">
                    <h4 class="pdg" style="height: 50px">4.在临床药物使用过程中，您是否会关注抗生素相互作用并考虑调整剂量？</h4>
                    <p class="pdg">A. 不会，临床工作较忙，无暇顾及</p>
                    <p class="pdg">B. 小部分会，尤其是对某些相互作用明确的药物会关注</p>
                    <p class="pdg">C.大部分会，患者本身肝肾功能不全会更为关注</p>
                    <p class="pdg">D. 都会考虑，药物相互作用在临床意义重大</p>
                  </el-col>-->
                </el-col>
              </el-row>
            </div>
          </el-row>

          <!--五行-->
          <el-row class="row" id="one">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <h3>参与人员</h3>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 70px">
                  <Doctor></Doctor>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane class="label" label="调研结果" name="name2">
          <!--四行-->
          <el-row class="row" id="two">
            <el-col :span="5">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <p>邀请人数</p>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pie></Pie>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>参与人数</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pies></Pies>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>完成人数</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Piess></Piess>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>有效样本</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Piesss></Piesss>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--二行-->
          <el-row class="row" id="two">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="24">
                      以下哪些药物具有协同作用？<br><span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Title></Title>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>开颅术后，需要给予丙戊酸钠和美罗培南分别预防癫痫和感染，您如何处理？<br><span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Titles></Titles>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--三行-->
          <el-row class="row" id="two">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <p>治疗单纯性下尿路感染需要使用较小剂量的原因是？<br><span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Titless></Titless>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>在临床药物使用过程中，您是否会关注抗生素相互作用并考虑调整剂量？<br><span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Titlesss></Titlesss>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
        </TabPane>
      </Tabs>
    </el-col>
  </div>
</template>

<script>
  import Title from './Title'
  import Titles from './Titles'
  import Titless from './Titless'
  import Titlesss from './Titlesss'
  import Pie from './pie'
  import Pies from './Pies'
  import Piess from './Piess'
  import Piesss from './Piesss'
  import Doctor from './doctor'
  export default {
    components: {
      Title,Titles,Titless,Titlesss,Pie,Pies,Piess,Piesss,Doctor
    },
    data() {
      return {
        trs:false,
        trs2:false,
        trs3:false,
        trs4:false,
      }
    },
    methods: {
      tds5(){
        this.trs = !this.trs
      },
      tds6(){
        this.trs2 = !this.trs2
      },
      tds7(){
        this.trs3 = !this.trs3
      },
      tds8(){
        this.trs4 = !this.trs4
      },
    }
  }
</script>

<style scoped>
  .row {
    padding-bottom: 30px;
  }
  .center {
    padding: 10px 30px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .h {
    border-bottom: 2px solid #fff;
/*    height: 40px;*/
    font-size: 18px;
  }
  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
    width: 100%;
  }
  .span{
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .green{
    background-color: #7b9e02;
  }
  .yellow{
    background-color: #deb81b;
  }
  .dark_green{
    background-color: #1f9e91;
  }
  .red{
    background-color: #e85656;
  }
  .pdg{
    padding: 10px 0;
  }
  table, th, td {
    padding: 10px 0;
  }
  table, td{
    border-bottom: 1px solid #fff;
  }
  .td>span{
    display: inline-block;
    padding: 0 10px;
    margin: 5px;
    border-radius: 5px;
  }
</style>
<style>
  .ivu-tabs-nav{
    width: 100%;
  }
  #div>.ivu-tabs-bar>.ivu-tabs-nav-container>.ivu-tabs-nav-wrap>.ivu-tabs-nav-scroll>.ivu-tabs-nav>div{
    width: 50%;
    text-align: center;
  }
  .ivu-tabs-tab{
    color: #fff;
    font-size: 20px;
  }
  .ivu-tabs-ink-bar{
    background-color: #e85656!important;
    height: 5px!important;
    position: absolute!important;
    left: 0!important;
    bottom: -5px!important;
  }
  .ivu-tabs-nav .ivu-tabs-tab-active{
    color: #fff!important;
    font-weight: bold!important;
  }
  .ivu-tabs-nav {
    border-bottom: 5px solid #fff!important;
  }
  .el-collapse-item__header{
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff!important;
  }
  .el-collapse-item__wrap{
    background-color: rgba(245, 245, 248, 0)!important;
    color: #fff!important;
  }
  .el-collapse-item__content{
    color: #fff!important;
  }
</style>
